<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <meta name="format-detection" content="telephone=no"/>


    <!--使用webkit内核-->
    <meta name="renderer" content="webkit">
    <meta name="renderer" content="ie-stand">
    <!--避免IE使用兼容模式-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1,IE=9" />

    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />

    <style>
        body{margin: 0;padding: 0}
        img{display: block;width: 100%;height: auto;}
    </style>
</head>
<body>
<div id="test">
    <h3 style="text-align: center;">图片展示, 支持手势放大,切换</h3>
    <img src="./photo_0.jpg" />
    <div style="width: 100%; height: 20px; " />
    <img src="./photo_1.jpg" />
    <img src="./photo_2.jpg" />
    <img src="./photo_3.jpg" />
    <img src="./photo_4.jpg" />
    <img src="./photo_5.jpg" />
    <img src="./photo_6.jpg" />
    <img src="./photo_7.jpg" />
    <img src="./photo_8.jpg" />
    <img src="./photo_9.jpg" />
    <img src="./photo_10.jpg" />
    <img src="./photo_11.jpg" />
    <img src="./photo_12.jpg" />
    <img src="./photo_13.jpg" />
    <img src="./photo_14.jpg" />
    <img src="./photo_15.jpg" />
    <img src="./photo_16.jpg" />
    <img src="./photo_17.jpg" />
    <img src="./photo_18.jpg" />
    <img src="./photo_19.jpg" />
    <img src="./photo_20.jpg" />
    <img src="./photo_21.jpg" />
    <img src="./photo_22.jpg" />
    <img src="./photo_23.jpg" />
    <img src="./photo_24.jpg" />
    <img src="./photo_25.jpg" />
    <img src="./photo_26.jpg" />

</div>
</body>

<script src="./jquery-2.1.1.js"></script>
<script src="./fly_zomm_img.min.js"></script>
<script>
    /**
     *  H5图标浏览插件
     *  支持多图识别切换
     *  支持手势放大,切换
     */
    $(function (){
        $('#test').FlyZommImg();
    })


</script>
</html>